<template>
	<view class="job-fairs-list">
		<view class="list">
			<view class="item" v-for="item in jobFairsList" :key="item.id" @click="toPage(item.id)">
				<view class="image"><image :src="item.image" mode=""></image></view>
				<view class="wrap">
					<view class="title">{{ item.title }}</view>
					<view class="time">
						<text class="yzb label-icon yzb-shijian"></text>
						<text>{{ timeFormat(item.startTime) }} 至 {{ timeFormat(item.endTime) }}</text>
					</view>
					<view class="total">
						共有{{ item.companys.length }}家企业参加，{{ jobTotal(item.companys) }}个热招职位
						<text class="status current" v-if="jobFairsStatus(item.startTime, item.endTime)">进行中</text>
						<text class="status end" v-else>已结束</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getJobFairsList } from '@/apis/job-fairs/index.js';

export default {
	data() {
		return {
			jobFairsList: []
		};
	},
	mounted() {
		this.initData();
	},
	methods: {
		async initData() {
			const res = await getJobFairsList({ page: 1, size: 99 });
			if (res.code === 200) {
				this.jobFairsList = res.data.list;
			}
		},
		// 格式化时间
		timeFormat(value) {
			return uni.$uv.timeFormat(value);
		},
		// 计算岗位数量
		jobTotal(companys) {
			let total = 0;
			companys.forEach(comp => {
				total += comp.jobs.length;
			});
			return total;
		},
		// 举办状态
		jobFairsStatus(startTime, endTime) {
			const time = new Date();
			const startDate = new Date(startTime);
			const endDate = new Date(endTime);

			if (time >= startDate && time <= endDate) {
				return true;
			}
			return false;
		},
		toPage(id) {
			uni.navigateTo({ url: `/pages/job-fairs/index?id=${id}` });
		}
	}
};
</script>

<style lang="scss">
.job-fairs-list {
	padding: 30rpx;
	.item {
		margin-bottom: 30rpx;
		border-radius: 20rpx;
		background-color: #fff;
		image {
			width: 100%;
			height: 350rpx;
			border-radius: 20rpx 20rpx 0 0;
		}
		.wrap {
			padding: 0 20rpx;
			.title {
				font-size: 36rpx;
				margin-top: 20rpx;
			}
			.time {
				display: flex;
				align-items: center;
				margin: 16rpx 0;
				color: #606266;
				.label-icon {
					margin-right: 10rpx;
				}
			}
			.total {
				position: relative;
				border-top: 1rpx solid #ccc;
				line-height: 80rpx;
				.status {
					position: absolute;
					top: 50%;
					right: 0;
					transform: translateY(-50%);
				}
				.current {
					color: #f9ae3d;
				}
				.end {
					color: #e45656;
				}
			}
		}
	}
}
</style>
